/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-03 23:15:59
 * @LastEditTime: 2022-05-04 17:18:20
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
import { connect } from 'react-redux'
import React, { Component } from 'react'

import { increase, reduction } from '../../redux/actions/count'

class Count extends Component {
  addition = () => {
    this.props.increase(this.selectRef.value)
  }
  subtraction = () => {
    this.props.reduction(this.selectRef.value)
  }
  oddNumberAdd = () => {
    if (this.props.count % 2 !== 0) {
      this.props.increase(this.selectRef.value)
    }
  }
  asyncAdd = ()=>{
    setTimeout(()=>{
      this.props.increase(this.selectRef.value)

    },500)
  }
  render() {
    return (
      <div>
        <h3>当前值:{this.props.count},当前人数:{this.props.personLength}</h3>
        <select ref={e => this.selectRef = e}>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
        </select>
        <button onClick={this.addition}>+</button>
        <button onClick={this.subtraction}>-</button>
        <button onClick={this.oddNumberAdd}>奇数加</button>
        <button onClick={this.asyncAdd}>异步加</button>
      </div>
    )
  }
}

export default connect(
  (state) => ({ count: state.count, personLength: state.person.length }),
  {
    increase,
    reduction
  }
)(Count)